<template>
  <div class="audio-player">
    <!-- 隐藏的原生 audio 元素 -->
    <audio ref="audioEl" :src="audioSrc" @timeupdate="updateTime"></audio>

    <div class="controls">
      <!-- 播放/暂停按钮 -->
      <el-button
        type="primary"
        :icon="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"
        @click="togglePlay"
        circle
      ></el-button>

      <!-- 进度条 -->
      <div class="progress-container">
        <span class="time">{{ formatTime(currentTime) }}</span>
        <el-slider
          v-model="progress"
          :max="duration"
          :format-tooltip="formatTime"
          @change="seekTo"
          class="progress-slider"
        ></el-slider>
        <span class="time">{{ formatTime(duration) }}</span>
      </div>

      <!-- 音量控制 -->
      <div class="volume-control">
        <el-popover
          placement="top"
          width="50"
          trigger="hover"
        >
          <el-slider
            v-model="volume"
            vertical
            height="100px"
            :max="1"
            :step="0.1"
            @change="setVolume"
          ></el-slider>
          <template #reference>
            <el-button
              type="info"
              :icon="volumeIcon"
              circle
            ></el-button>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    audioSrc: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isPlaying: false,
      currentTime: 0,
      duration: 0,
      progress: 0,
      volume: 1
    }
  },
  computed: {
    volumeIcon() {
      if (this.volume === 0) return 'el-icon-turn-off-microphone'
      if (this.volume < 0.5) return 'el-icon-mic'
      return 'el-icon-mic-open'
    }
  },
  mounted() {
    this.$refs.audioEl.addEventListener('loadedmetadata', () => {
      this.duration = Math.floor(this.$refs.audioEl.duration)
    })
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.$refs.audioEl.pause()
      } else {
        this.$refs.audioEl.play()
      }
      this.isPlaying = !this.isPlaying
    },
    updateTime() {
      this.currentTime = Math.floor(this.$refs.audioEl.currentTime)
      this.progress = this.currentTime
    },
    seekTo(value) {
      this.$refs.audioEl.currentTime = value
    },
    setVolume(value) {
      this.$refs.audioEl.volume = value
    },
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60)
      const secs = Math.floor(seconds % 60)
      return `${mins}:${secs.toString().padStart(2, '0')}`
    }
  },
  beforeDestroy() {
    this.$refs.audioEl.pause()
  }
}
</script>

<style scoped>
.audio-player {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.progress-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.time {
  color: #909399;
  font-size: 12px;
  min-width: 40px;
}

.progress-slider {
  flex: 1;
}

.volume-control {
  width: 40px;
}

/* 美化滑块 */
:deep(.el-slider__bar) {
  background-color: #409EFF;
}

:deep(.el-slider__button) {
  border-color: #409EFF;
}
</style>
